<template>
  <div class="reviewDialog">
    <div class="main">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="姓名" prop="user_name">
          <el-input
            class="custom-input"
            type="text"
            v-model="form.user_name"
            placeholder
            :readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="id_num">
          <el-input
            class="custom-input"
            type="text"
            v-model="form.id_num"
            placeholder="请输入发货方电话"
            :readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="加油站名称" prop="name">
          <el-input class="custom-input" type="text" v-model="form.name" placeholder></el-input>
        </el-form-item>
        <el-form-item label="加油站地址" prop="phone">
          <el-input
            class="custom-input"
            type="text"
            :value="`东经:${form.lng}, 北纬:${form.lat}`"
            placeholder
          ></el-input>
        </el-form-item>
        <div class="imgs-box">
          <div class="box">
            <div class="title">加油站图片</div>
            <el-image :src="form.logo" :fit="'cover'" :preview-src-list="[form.logo]"></el-image>
          </div>
          <div class="box">
            <div class="title">身份证正面</div>
            <el-image :src="form.id_card" :fit="'cover'" :preview-src-list="[form.id_card]"></el-image>
          </div>
          <div class="box" style="margin-right: 0px;">
            <div class="title">身份证反面</div>
            <el-image
              :src="form.id_card_back"
              :fit="'cover'"
              :preview-src-list="[form.id_card_back]"
            ></el-image>
          </div>
          <div class="box">
            <div class="title">营业许可证</div>
            <el-image
              :src="form.business_pic"
              :fit="'cover'"
              :preview-src-list="[form.business_pic]"
            ></el-image>
          </div>
          <div class="box">
            <div class="title">危险品经营许可证</div>
            <el-image :src="form.danger_pic" :fit="'cover'" :preview-src-list="[form.danger_pic]"></el-image>
          </div>
        </div>
      </el-form>
    </div>

    <div class="dialog-footer" v-if="form.status == 0">
      <el-button type="primary" @click="action('pass',form.id)">通 过</el-button>
      <el-button type="danger" @click="action('reject',form.id)">不通过</el-button>
    </div>
  </div>
</template>

<script>
import {reviewGasStations } from "@/api/gasStation"
export default {
  name: "reviewDialog",
  props: {
    form: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      readonly: true
    };
  },
  mounted() {
    console.log("form", this.form);

    this.initial();
  },
  methods: {
    async initial() {},
    async action(type,id){
        let result = await reviewGasStations({
            id, id,
            status:type == 'pass' ? 1 : 2
        });
        if(result.code == 200){
            this.$emit("refresh")
        }
        
    }
  }
};
</script>

<style lang="scss" scoped>
.reviewDialog {
  // height:70vh;
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      width: 50%;
    }

    .tool {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .sureBtn {
        width: 250px;
      }
    }

    .imgs-box {
      margin: 0 auto;
      width: 93%;
      //   height: 300px;
      font-weight: 700;
      display: flex;
      // justify-content: space-between;
      margin-top: 20px;
      flex-wrap: wrap;

      & > .box {
        width: 30%;
        display: flex;
        flex-direction: column;
        height: 200px;
        margin-right: 40px;
        margin-bottom: 20px;
        .title {
          margin-bottom: 10px;
        }
        .el-image{
            height: 100%;
        }
      }
      
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
}
</style>
